<template>
  <BaseAgGrid v-bind="gridOptions" />
</template>

<script setup lang="ts">
import BaseAgGrid from '@/components/BaseAgGrid.vue'
import { ref } from 'vue'
import { type GridOptions, type IErrorValidationParams } from 'ag-grid-community'
import type { IOlympicData } from '@/views/types'

import json from './data/cus-cmp.json'
const gridOptions = ref<GridOptions<IOlympicData>>({
  rowData: json,
  columnDefs: [
    {
      field: 'name',
      headerName: '名称',
      cellEditor: 'agTextCellEditor',
      cellEditorParams: {
        // maxLength: 10,
        // 鼠标悬停3s后显示错误信息
        getValidationErrors: (params: IErrorValidationParams<IOlympicData, string>) => {
          const { value } = params;
          if (!value || value.length < 3 || value.length > 10) {
            return ['该值长度 >=3 <=10'];
          }

          return null;
        },
      },
    },
    {
      field: 'age', headerName: '年龄', cellEditorParams: {
        min: 0,
        max: 150,
        getValidationErrors: (params: IErrorValidationParams<IOlympicData, number>) => {
          const { value } = params;
          if (!value)
            return ["该值不能为空"];
          if (value < 0)
            return ['该值必须 >=0'];
          if (value > 150)
            return ['该值必须 <=150'];

          return null;
        },
      }
    },
    { field: 'gender', headerName: '性别' },
    { field: 'phone', headerName: '电话' },
    { field: 'email', headerName: '邮箱' },
    { field: 'address', headerName: '地址' },
    { field: 'company', headerName: '公司' },
  ],
  defaultColDef: {
    flex: 1,
    editable: true,
  },
  enableCellSpan: true,
  invalidEditValueMode: 'block',
})
</script>

<style scoped></style>
